<template>
	<div :class="$style.fifth">
		<div :class="$style.header">
			<div :style="{ fontSize: headerFontSize }">
				最新:
				<span 
					:class="$style.latest" 
					:style="getPriceColor(prices.latestPrice)"
					@click="setPrice(prices.latestPrice)">{{ prices.latestPrice | handlePrice }}</span>
			</div>
			<div :style="{ fontSize: headerFontSize }">
				昨收:
				<span :class="$style.close" @click="setPrice(prices.closePrice)">{{ prices.closePrice | handlePrice }}</span>
			</div>
			<div :style="{ fontSize: headerFontSize }">
				涨停:
				<span :class="$style.raise" @click="setPrice(prices.raiseLimit)">{{ prices.raiseLimit | handlePrice }}</span>
			</div>
			<div :style="{ fontSize: headerFontSize }">
				跌停:
				<span :class="$style.down" @click="setPrice(prices.downLimit)">{{ prices.downLimit | handlePrice }}</span>
			</div>
		</div>

		<div :class="$style.body">
			<div :class="$style.buy">
				<ul>
					<li>
						买一
						<span 
							:class="$style.buyprice"
							:style="getPriceColor(prices.buyPrice1)"
							@click="setPrice(prices.buyPrice1)">{{ prices.buyPrice1 | handlePrice }}</span>
						<span :class="$style.buynum">{{ prices.buyNum1 | handlePrice }}</span>
					</li>
					<li>
						买二
						<span 
							:class="$style.buyprice" 
							:style="getPriceColor(prices.buyPrice2)"
							@click="setPrice(prices.buyPrice2)">{{ prices.buyPrice2 | handlePrice }}</span>
						<span :class="$style.buynum">{{ prices.buyNum2 | handlePrice }}</span>
					</li>
					<li>
						买三
						<span 
							:class="$style.buyprice" 
							:style="getPriceColor(prices.buyPrice3)"
							@click="setPrice(prices.buyPrice3)">{{ prices.buyPrice3 | handlePrice }}</span>
						<span :class="$style.buynum">{{ prices.buyNum3 | handlePrice }}</span>
					</li>
					<li>
						买四
						<span 
							:class="$style.buyprice" 
							:style="getPriceColor(prices.buyPrice4)"
							@click="setPrice(prices.buyPrice4)">{{ prices.buyPrice4 | handlePrice }}</span>
						<span :class="$style.buynum">{{ prices.buyNum4 | handlePrice }}</span>
					</li>
					<li>
						买五
						<span 
							:class="$style.buyprice" 
							:style="getPriceColor(prices.buyPrice5)"
							@click="setPrice(prices.buyPrice5)">{{ prices.buyPrice5 | handlePrice }}</span>
						<span :class="$style.buynum">{{ prices.buyNum5 | handlePrice }}</span>
					</li>
				</ul>
			</div>
			<div :class="$style.sell">
				<ul>
					<li>
						卖一
						<span 
							:class="$style.sellprice" 
							:style="getPriceColor(prices.sellPrice1)"
							@click="setPrice(prices.sellPrice1)">{{ prices.sellPrice1 | handlePrice }}</span>
						<span :class="$style.sellnum">{{ prices.sellNum1 | handlePrice }}</span>
					</li>
					<li>
						卖二
						<span 
							:class="$style.sellprice" 
							:style="getPriceColor(prices.sellPrice2)"
							@click="setPrice(prices.sellPrice2)">{{ prices.sellPrice2 | handlePrice }}</span>
						<span :class="$style.sellnum">{{ prices.sellNum2 | handlePrice }}</span>
					</li>
					<li>
						卖三
						<span 
							:class="$style.sellprice" 
							:style="getPriceColor(prices.sellPrice3)"
							@click="setPrice(prices.sellPrice3)">{{ prices.sellPrice3 | handlePrice }}</span>
						<span :class="$style.sellnum">{{ prices.sellNum3 | handlePrice }}</span>
					</li>
					<li>
						卖四
						<span 
							:class="$style.sellprice" 
							:style="getPriceColor(prices.sellPrice4)"
							@click="setPrice(prices.sellPrice4)">{{ prices.sellPrice4 | handlePrice }}</span>
						<span :class="$style.sellnum">{{ prices.sellNum4 | handlePrice }}</span>
					</li>
					<li>
						卖五
						<span 
							:class="$style.sellprice" 
							:style="getPriceColor(prices.sellPrice5)"
							@click="setPrice(prices.sellPrice5)">{{ prices.sellPrice5 | handlePrice }}</span>
						<span :class="$style.sellnum">{{ prices.sellNum5 | handlePrice }}</span>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>

	const handlePrice = (val) => {
		return val === null || val === undefined || val === "" || val.length === 0 || parseFloat(val) == 0
			? '-' : val
	}
	
	export default {

		computed: {
			prices () {
				return this.$store.state.buyFivePrices
			},
			
			headerFontSize () {
				const _width = window.innerWidth
				if (_width <= 320) {
					return '12px' 
				} else {
					return '14px'
				}
			}
		},

		methods: {
			setPrice (price) {
				if (price === null || price === undefined || price === "" || price.length === 0 || parseFloat(price) == 0) return
				this.$emit('setprice', price)
			},

			getPriceColor (price) {
				if (parseFloat(this.prices.closePrice).toFixed(2) === parseFloat(price)) {
					return { color: '#999' }
				}
				return {
					color: parseFloat(this.prices.closePrice) < parseFloat(price) ? '#FF3333' : ''
				}
			}
		},

		filters: {
			handlePrice
		}

	}
</script>

<style module lang="less">
	
	.fifth {
		margin-top: 8px;
		background-color: #FFF;
		border-top: 1px solid #e5e5e5;
	}

	.header {
		display: -webkit-box;
		padding: 12px 18px;
		border-bottom: 1px solid #E7E7E7;

		> div {
			-webkit-box-flex: 1;
			color: #999;
			font-size: 14px;
			line-height: 15px;
			padding-left: 5px;
		}
	}

	@media screen and (max-width: 330px) {
		.body {
			display: -webkit-box;

			ul {
				padding: 0;
			}

			li {
				list-style: none;
				color: #999;
				font-size: 13px!important;
				line-height: 16px;
				margin-bottom: 30px;
			}
		}
	}

	.body {
		display: -webkit-box;

		ul {
			padding: 0;
		}

		li {
			list-style: none;
			color: #999;
			font-size: 15px;
			line-height: 16px;
			margin-bottom: 30px;
		}
	}

	.buy {
		position: relative;
		padding: 19px 8px 0px 25px;

		::after {
			position: absolute;
			right: 0;
			top: 8px;
			bottom: 8px;
			content: '';
			width: 1px;
			background-color: #E7E7E7;
			transform: scaleX(50%);
		}
	}

	.sell {
		padding: 18px 12px 0px 19px;
	}

	.buy, .sell {
		-webkit-box-flex: 1;
		width: 50%;
	}

	.latest, .close, .raise, .down {
		display: inline-block;
		margin-left: 2px;
	}

	.latest {
		color: #89CD4C;
	}

	.close {
		color: #999;
	}

	.raise {
		color: #FF3333;
	}

	.down {
		color: #89CD4C;
	}

	.buyprice, .buynum {
		display: inline-block;
	}

	.buyprice {
		color: #89CD4C;
		padding-left: 24px;
	}

	.buynum {
		float: right;
	}

	.sellprice, .sellnum {
		display: inline-block;
	}

	.sellprice {
		color: #89CD4C;
		padding-left: 24px;
	}

	.sellnum {
		float: right;
	}
</style>